<template>
  <transition name="slide-fade-m">
  <div class="container">
    <div class="suite"  v-if="state">
      <ul v-if="module.id">
        <li><span>价格</span>{{module.salesPrice }}<span class="span2"  v-if="module.salesPrice">元</span></li>
        <li v-if="module.startPrice"><span>起步价</span>{{module.startPrice }}</li>
        <li><span>套餐内费用</span>{{module.inPrice }}</li>
        <li><span>超出套餐费</span>{{module.outPrice }}</li>
        <li><span>适用车型</span>{{module.carTypes }}</li>
        <li v-if="module.useTime"><span>使用时间</span>{{module.useTime }}</li>
        <li><span>使用说明</span>{{module.instruction }}</li>
      </ul>
      <div class="static-bottom">
        <a class="btn" v-on:click="buySuite()">购买</a>
      </div>
    </div>
    <div class="suite"  v-else>
      <div class="pageError">
        <p @click="retry()">获取套餐信息失败，稍后重试</p>
      </div>
    </div>
    <simplert ref="simplert"></simplert>
  </div>
  </transition>
</template>

<script>
  import Simplert from '../components/dialog/dialog.vue'

  var filters = {
    parseURL:function(url) {
      var a = document.createElement('a');
      a.href = url;
      return {
        params: (function () {
          var ret = {},
            param = a.href.split('?')[1],
            seg = param.split('&'),
            len = seg.length,
            i = 0,
            s;
          for (; i < len; i++) {
            if (!seg[i]) {
              continue;
            }
            s = seg[i].split('=');
            ret[s[0]] = s[1];
          }
          return ret;
        })()
      }
    }
  }

  export default {
    data () {
      return {
        productId:'',
        token:"",
        state:true,
        module:{},
        postState:false
      }
    },
    created () {

    },
    mounted(){
      if(document.documentElement.clientWidth>750)
      {
        document.documentElement.style.fontSize = '100px'
      }else{
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
      }
      const that = this;
      const url = window.location.href;
      this.productId = filters.parseURL(url).params.productId;
      this.$util.getUserToken().then(token=>{
        that.token = token;
        that.getActivityDetail();
      })
    },
    components: {
      Simplert
    },
    methods: {
      open (title, confirmBtn,customConfirmBtnText,onConfirm,type,onClose) {
        let obj = {
          title: title,
          useConfirmBtn: confirmBtn,
          customConfirmBtnText: customConfirmBtnText,
          onConfirm:onConfirm,
          type: type,
          onClose:onClose
        }
        this.$refs.simplert.openSimplert(obj)
      },
      getActivityDetail(){
        this.$api.post('/product/v1/authApi/detailForBuy?productId='+this.productId,{},s=>{
          this.module = s.module;
        },f=>{
          this.state = false
        },{
          "token": this.token
        })
      },
      buySuite(){
        if(this.postState){
          return
        }else{
          this.postState = true;
        }
        const that = this;
        this.open('确认购买？',true,'确认',function(){
          that.$api.post('/product/v1/authApi/buy?productId='+that.productId,{},s=>{
            that.postState = false;
            let userAgentObj = navigator.userAgent;
            that.open('购买成功',false,'','','',function(){
              if(userAgentObj.match(/Android/i)){
                window.control.refreshWallet();
              }else if(userAgentObj.match(/iPhone/i))
              {
                refreshWallet();
              }
              that.$router.go(-1)
            })
          },f=>{
            that.postState = false;
            if(f.resultCode === '30006')
            {
              that.open('您的现金余额不足，请先去充值！',true,'充值',function(){
                let userAgentObj = navigator.userAgent;
                if(userAgentObj.match(/Android/i)){
                  window.control.recharge();
                }else if(userAgentObj.match(/iPhone/i))
                {
                  recharge();
                }
              })
            }else if(f.errorMessage){
              that.open(f.errorMessage,false,'','','',function(){
                that.$router.go(-1)
              });
            }else{
              that.open('购买失败',false,'','','',function(){
                that.$router.go(-1)
              });
            }
          },{
            "token": that.token
          })
        },'',function(){
          that.postState = false;
        })
      },
      retry (){
        window.location.reload();
      }
    }
  }
</script>
<style scoped >
  @import "./styles/styles.css";
  ul>li{ font-size: 14px; padding: 0.24rem;  padding-left: 105px; border-bottom: 1px solid #eee; line-height: 0.5rem;}
  ul>li:last-child{ border-color: transparent;}
  ul>li>span{ font-weight: bold; width: 105px; margin-left: -105px; padding-left: 0.24rem; display: inline-block;}
  ul>li>span.span2{ font-weight: normal; display: inline; padding-left: 0; margin: 0; }
  .container{ height: 100%;}
  .suite{ padding: .34rem .34rem 2.5rem;  margin: 0 auto; max-width: 750px; height: 100%; overflow-y: scroll;}
  .static-bottom{ position:absolute; bottom: 0; left: 0; right: 0; width: 100%; display: flex;}
  .pageError{
    text-align: center;
    line-height: 2em;
    padding: 8em 0;
    font-size: 14px;
  }
  .slide-fade-m-enter-active {  transition: all .2s ease;  }
  .slide-fade-m-leave-active {  transition: all .3s ease;  }
  .slide-fade-m-enter, .slide-fade-m-leave-active {  opacity: 0;  }
  .btn{ display: block; width: initial; flex-grow: 2;  height: 0.97rem; font-weight: 500; text-align: center; line-height: 1rem; font-size: 16px; background: #ff4610; color: #f5f5f5;}
</style>
